<template>
    <div :style="{marginTop:$store.state.navbarHeight+6+'px'}">
        <Navbar bgColor="bg-gradual-blue" title="ئەزا مەركىزى" />
        <div class="container" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="user-info" v-if="userInfo.avatarUrl">
                <div class="avatar">
                    <span class="vip" v-if="userStatus.isVip">
                        <i class="icon myfont icon-vip-tianchong" />
                    </span>
                    <div class="left">
                        <img :src="userInfo.avatarUrl">
                    </div>
                    <div class="right">
                        <div class="username">{{userInfo.nickName}}</div>
                        <div class="uid">ID:{{userInfo.uid}}</div>
                        <div class="isvip" v-if="!userStatus.isVip">ئادەتتىكى ئەزا</div>
                        <div class="isvip" v-if="userStatus.isVip">
                            <span class="end-time">{{formatTime(userStatus.endTime/1000,'Y-M-D')}}</span>
                            <span>:ئالىي ئەزا </span>
                        </div>
                        <div class="isvip">
                            <span class="integral">{{userStatus.score?Number(userStatus.score):0}}</span>
                            <span>:جۇغلانما </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="login" v-else>
                <div class="btn">
                    <button @click="getUserInfo" open-type="getUserInfo">كىرىش</button>
                </div>
            </div>
            <div class="operate">
                <div class="order" @click="toOrder">
                    <span class="tubiao"><i class="icon myfont icon-dingdan1"></i></span>
                    <span class="title">زاكاس باشقۇرۇش</span>
                </div>
                <div class="vip" @click="toVipPage">
                    <span class="tubiao"><i class="icon myfont icon-huiyuan2"></i></span>
                    <span class="title">بولۇش VIP</span>
                </div>
                <div class="history" @click="toEverSeen">
                    <span class="tubiao"><i class="icon myfont icon-chakan"></i></span>
                    <span class="title">كۆرگەنلىرىم</span>
                </div>
            </div>
            <div class="list">
                <div class="ever-buy" @click="toBuyList">
                    <div class="left"><i class="icon myfont icon-xiazai6"></i></div>
                    <div class="right">
                        <div>
                            <span class="tubiao"><i class=" icon myfont icon-gouwu"></i></span>
                            <span class="title">سېتىۋالغان ڧىلىملىرىم</span>
                        </div>
                    </div>
                </div>
                <div class="collect" @click="toCollect">
                    <div class="left"><i class="icon myfont icon-xiazai6"></i></div>
                    <div class="right">
                        <div>
                            <span class="tubiao"><i class=" icon myfont icon-heart-fill"></i></span>
                            <span class="title">ساقلىۋالغانلىرىم</span>
                        </div>
                    </div>
                </div>
                <div class="connect">
                    <div class="left"><i class="icon myfont icon-xiazai6"></i></div>
                    <div class="right">
                        <div>
                            <span class="tubiao"><i class=" icon myfont icon-kefu"></i></span>
                            <span class="title">
                                <button style="display:none;" open-type="contact">ئالاقىلىشىش</button>
                                ئالاقىلىشىش</span>
                        </div>
                    </div>
                </div>
                <div class="connect" @click="toShare">
                    <div class="left"><i class="icon myfont icon-xiazai6"></i></div>
                    <div class="right">
                        <div>
                            <span class="tubiao"><i class=" icon myfont icon-tubiao15"></i></span>
                            <span class="title">ھەقسىز VIP</span>
                        </div>
                    </div>
                </div>
                <div class="connect" @click="aboutUs">
                    <div class="left"><i class="icon myfont icon-xiazai6"></i></div>
                    <div class="right">
                        <div>
                            <span class="tubiao"><i class=" icon myfont icon-dianhua"></i></span>
                            <span class="title">بىز ھەققىدە</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <button @click="test">TESt</button> -->
        </div>
        <i-toast id="toast" />
        <Tabbar :selectNavIndex="1"></Tabbar>
    </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import Tabbar from "@/components/Tabbar.vue";
import Navbar from "@/components/Navbar.vue";
import { config } from "@/utils/config";
import { formatTime, $Toast } from "@/utils";
const qcloud = require("wafer2-client-sdk");

import { mapState, mapActions, mapGetters } from "vuex";

export default {
    components: {
        HelloWorld,
        Tabbar,
        Navbar
    },
    data() {
        return {
            userInfo: {}
        };
    },
    mounted() {
        let userInfo = wx.getStorageSync("userInfo");
        this.userInfo = userInfo;
    },
    methods: {
        formatTime,
        ...mapActions(["getSystemInfo"]),
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        getIphone() {},
        toVipPage() {
             let sys = this.$store.state.systemInfo;
            if (!this.$store.state.config.iosPay && sys.platform == "ios") {
                wx.showModal({
                    title: "付费提示", //提示的标题,
                    content:
                        "根据平台相关规则付费功能暂未向IOS用户开放,پۇل تۆلەش ئىقتىدارى ۋاقتىنچە ئالما ئابونتلىرىغا ئېتىۋېتىلدى", //提示的内容,
                    showCancel: false, //是否显示取消按钮,
                    confirmText: "知道了", //确定按钮的文字，默认为取消，最多 4 个字符,
                    confirmColor: "#3CC51F", //确定按钮的文字颜色,
                    success: res => {}
                });
                return;
            } else

            wx.navigateTo({ url: "/pages/VIP/VIP" });
        },
        toEverSeen() {
            wx.navigateTo({ url: "/pages/Seen/Seen" });
        },
        toCollect() {
            if (!this.$store.state.userInfo.openId) {
                $Toast({
                    content: "ئاۋۋال كىرىڭ",
                    mask: true
                });
                return;
            }
            wx.navigateTo({
                url: "/pages/Collect/Collect?uid=" + this.userInfo.uid
            });
        },
        toBuyList() {
            if (!this.$store.state.userInfo.openId) {
                $Toast({
                    content: "ئاۋۋال كىرىڭ",
                    mask: true
                });
                return;
            }
            wx.navigateTo({
                url: "/pages/BuyList/BuyList?uid=" + this.userInfo.uid
            });
        },
        toOrder() {
            if (!this.$store.state.userInfo.openId) {
                $Toast({
                    content: "ئاۋۋال كىرىڭ",
                    mask: true
                });
                return;
            }
            wx.navigateTo({
                url: "/pages/Order/Order?uid=" + this.userInfo.uid
            });
        },
        aboutUs() {
            wx.setStorageSync("AD", {
                adUrl: "https://about.qolayapp.cn/about/index.html"
            });
            wx.navigateTo({ url: "/pages/AD/AD" });
        },
        developing() {
            $Toast({
                content: "ئىقتىدار ياسىلىۋاتىدۇ"
            });
            setTimeout(() => {
                $Toast.hide();
            }, 1500);
        },
        getUserInfo() {
            wx.navigateTo({ url: "/pages/Login/Login" });
        },
        toShare() {
            wx.navigateTo({ url: "/pages/Share/Share" });
        }
    },
    computed: {
        ...mapState(["userStatus"])
    },
    onPullDownRefresh() {
        console.log("ok");
    },
    onReachBottom() {
        console.log("bottom");
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    },
    onShow() {
        wx.hideTabBar();
        let userInfo = wx.getStorageSync("userInfo");
        this.userInfo = userInfo;
        if (userInfo && userInfo.openId && userInfo.uid) {
            this.$store.commit("SET_USERINFO", userInfo);
        } else {
            if (this.$store.state.config.forceLogin) {
                wx.navigateTo({ url: "/pages/Login/Login" });
            } else {
            }
        }
    }
};
</script>

<style lang="scss">
.container {
    font-family: "ALKATIP UI";
    display: block;
    border: 1px solid transparent;
    .user-info {
        width: 100%;
        height: 230rpx;
        box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.2);
        border-radius: 42rpx;
        margin: 15rpx auto;
        border: 1px solid transparent;
        .avatar {
            margin: 40rpx 0rpx 10rpx 30rpx;
            border: 2rpx solid transparent;
            position: relative;
            .vip {
                display: block;
                position: absolute;
                left: 87rpx;
                color: #ff464e;
                top: 112rpx;
                z-index: 2;
                border-radius: 50%;
                .myfont {
                    font-size: 51rpx;
                }
            }
            .left {
                display: inline-block;
                box-sizing: border-box;
                width: 150rpx;
                height: 150rpx;
                border-radius: 50%;
                overflow: hidden;
                box-shadow: 0 0 20rpx 3rpx rgba(0, 0, 0, 0.5);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .right {
                // display: inline-block;
                vertical-align: top;
                margin-left: 40rpx;
                display: inline-flex;
                flex-direction: column;
                justify-content: space-around;
                color: #40c4ff;
                height: 150rpx;
                direction: rtl;
                text-align: left;
                .end-time,
                .integral {
                    margin-left: 20rpx;
                }
                /* .uid {
                }
                .username {
                } */
            }
        }
    }
    .login {
        color: #fff;
        width: 100%;
        height: 230rpx;
        box-shadow: 0 0 20rpx 5rpx rgba(0, 0, 0, 0.2);
        border-radius: 42rpx;
        margin: 15rpx auto;
        border: 1px solid transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            height: 200rpx;
            width: 200rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #0081ff;
            font-size: 35rpx;
            button {
                box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.15);
                width: 100%;
                height: 100%;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #0081ff;
                color: white;
                font-family: "ALKATIP UI";
                opacity: 1;
                font-size: 44rpx;
                animation: btn-move 3s linear 0s infinite alternate;
                transition: all 0.5s linear;
                &:active,
                &:focus {
                    font-size: 50rpx;
                    width: 250rpx;
                    height: 250rpx;
                }
            }
        }
    }

    .operate {
        width: 100%;
        height: 170rpx;
        box-shadow: 0 0 20rpx 1rpx rgba(0, 0, 0, 0.15);
        border-radius: 41rpx;
        display: flex;
        justify-content: space-around;
        text-align: center;
        .order,
        .history,
        .vip {
            display: flex;
            flex-direction: column;
            justify-content: center;
            .tubiao {
                color: #0081ff;
                margin-bottom: 20rpx;
                .myfont {
                    font-size: 50rpx;
                }
            }
            .title {
                color: #0081ff;
                font-size: 30rpx;
                .myfont {
                    font-size: 50rpx;
                }
            }
        }
    }
    .list {
        margin-top: 20rpx;
        // background-color: #f0f0f0;
        box-sizing: border-box;
        .ever-buy,
        .collect,
        .connect {
            height: 80rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            color: #999;
            margin-bottom: 10rpx;
            border-radius: 15rpx;
            box-shadow: 0 0 10rpx 1rpx rgba(0, 0, 0, 0.15);
            .left {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 10rpx;
                .myfont {
                    font-size: 30rpx;
                }
            }
            .right {
                display: flex;
                justify-content: center;
                align-items: center;
                div {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    direction: rtl;
                    .title {
                        font-size: 30rpx;
                    }
                    .tubiao {
                        margin: 0 15rpx;
                        display: inline-block;
                        width: 55rpx;
                        height: 55rpx;
                        background-color: #0081ff;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #fff;
                    }
                }
            }
        }
        .connect {
            margin-bottom: 8rpx;
        }
    }
}
</style>
